<template>
  <!-- 用户信息 -->
  <div id="userInfo">
    <van-nav-bar fixed
                 :left-text="userInfo.nickname"
                 left-arrow
                 @click-left="$router.go(-1)" />
    <header>
      <!-- <van-image width="100%" height="100%" :src="userInfo.backgroundUrl" /> -->
      <van-row style="margin-top: 45px">
        <van-col span="8">
          <div style="margin: 10px 0 0 35px">
            <van-image width="60"
                       height="60"
                       round
                       :src="userInfo.avatarUrl" />
          </div>
          <div class="simple">
            <p style="margin: 0; font-size: 10px">{{ userInfo.signature }}</p>
          </div>
        </van-col>
        <van-col span="16">
          <van-cell>
            <template #title>
              <van-grid :border="false"
                        :column-num="3">
                <van-grid-item text="粉丝">
                  <template #icon>
                    {{ userInfo.followeds }}
                  </template>
                </van-grid-item>
                <van-grid-item text="关注">
                  <template #icon>
                    {{ userInfo.follows }}
                  </template>
                </van-grid-item>
                <van-grid-item text="等级">
                  <!-- <template #icon> Lv.{{ userLevel.level }} </template> -->
                </van-grid-item>
              </van-grid>
            </template>
            <template #label>
              <van-button round
                          block
                          type="default">关注</van-button>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </header>
  </div>
</template>

<script>
import { getUserDetalis } from '@/api/userInfo'
export default {
  name: 'userInfo',
  data() {
    return {
      userInfo: '',
    }
  },
  methods: {
    initData(id) {
      getUserDetalis(id, '').then((res) => {
        this.userInfo = res.profile
      })
    },
  },
  created() {
    this.initData(this.$route.query.id)
  },
}
</script>

<style scoped>
#userInfo .van-nav-bar {
  background: rgba(255, 255, 255, 255, 0.1);
}
#userInfo /deep/ .van-nav-bar__text,
#userInfo /deep/ .van-nav-bar .van-icon {
  color: #000;
}
</style>